This is my attempt redesigning the Autotrader app. I went for a clean style but allowed the colour of the cars to draw the users attention, along with image banner for the mini-search feature. I want the app to be readable but also remove the lists upon lists of information. The main change was the manufacture search function, alongside the manufacture’s names are also their logos making it easier to find the car you want.
The Search filter was the main redesign. Having the filter sections in related parts of the page, allowed the user to easily read and find what they are looking for. The main change as well was the body options, with the added graphics it makes it easier to understand what the user is selecting.
The car pages have also been changed. By having the page broken with boxes, makes it easier to understand and read what section you are on. It also follows the same design for consistency, but it also looks cleaner. Having the white space allows the eyes of the user not to strain.
https://xd.adobe.com/view/df3e601f-9f4d-49df-a2c2-622bf23f8406-8a6d/?fullscreen&hints=on
this is the link if you want to explore the app yourself (copy and paste in taskbar)
Only selections are a Subaru WRX STI, it should show up blue with the hints if you click on background of the page to help with selection. The main user flow is finding a subaru and viewing it.
(A glitch happened with get directions button, I tried fixing it but if should look the same as the photo).
It may look like the dimensions are off with the page but that is only because it is meant for mobile and it's to allow some of the options to be shown.
Autotrader website design for main user. Finding a car.
To keep the theme consistent I went for a clean look that would emphasizes the cars. I didn't want any lines in the page, in my opinion makes feel less cluttered and a lot easier to look at.
The main elements have been taken over from the app version in my previous post just with updated elements e.g. the car counter. I have also removed the search as the page will update when a filter has been selected.
(3rd and 4th picture)New features to the car search page is the ability to change the page layout from column to grid. this will allow the customer to view all the cars easily but also switch between overview and detailed tiles.
(5th photo )I have changed the appear of the main car page. I have put everything into tiles to tidy up the page to let the user know what is related and what isn't. As you can see from the 5th photo, there are two descriptions. The overview gives the short detailed version of what the car is and below in the detailed is the description from the seller.
I have also made the specifications, run costs and basic history into drop down menus.
A new feature I added is the ability to view a 3D Model of the sellers car. My new idea would to use Polycam technology so sellers can take a 3d scan their vehicle into app, allowing customers to see a 3d render of the vehicle they wish to buy. ( the arrows are only there to move the photo, real application will use the click and drag feature)
Demo - https://lnkd.in/dzDfPb8z
To keep the theme consistent I went for a clean look that would emphasizes the cars. I didn't want any lines in the page, in my opinion makes feel less cluttered and a lot easier to look at.
The main elements have been taken over from the app version in my previous post just with updated elements e.g. the car counter. I have also removed the search as the page will update when a filter has been selected.
(3rd and 4th picture)New features to the car search page is the ability to change the page layout from column to grid. this will allow the customer to view all the cars easily but also switch between overview and detailed tiles.
(5th photo )I have changed the appear of the main car page. I have put everything into tiles to tidy up the page to let the user know what is related and what isn't. As you can see from the 5th photo, there are two descriptions. The overview gives the short detailed version of what the car is and below in the detailed is the description from the seller.
I have also made the specifications, run costs and basic history into drop down menus.
A new feature I added is the ability to view a 3D Model of the sellers car. My new idea would to use Polycam technology so sellers can take a 3d scan their vehicle into app, allowing customers to see a 3d render of the vehicle they wish to buy. ( the arrows are only there to move the photo, real application will use the click and drag feature)
Demo - https://lnkd.in/dzDfPb8z
